<!-- 权限角色管理 -->
<template>
	<div class="table-container">
		<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
			<div class="team-trees">
				<el-form :model="search" @submit.native.prevent>
					<el-form-item label="角色名称">
						<el-input v-model="search.RoleName__PY" placeholder="角色名称" @keyup.native.enter="getList" />
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary" :loading="loading" @click="getList">查询
						</el-button>
					</el-form-item>
				</el-form>
				<el-table v-loading="loading" :data="list" @current-change="handleCurrentChange">
					<el-table-column prop="SysRolePostName" label="角色名称" width="150" align="left"></el-table-column>
					<el-table-column prop="SysStoreName" label="所属店铺" width="150" v-if="user.isAdminStore" align="left">
					</el-table-column>
					<el-table-column prop="Remark" label="备注" align="left"></el-table-column>
				</el-table>
				<el-pagination :current-page="search.index" :page-size="search.size" :total="total"
					@current-change="indexChange" @size-change="sizeChange"></el-pagination>
			</div>
		</el-col>
		<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
			<div class="team-trees">
				<div class="flex ju-sb">
					<div class="team1 ml2 flex al-ct">角色详情</div>
					<div class="flex">
						<el-button icon="el-icon-plus" type="primary" v-if="button.新建" @click="btnAdd">新建</el-button>
						<el-button icon="el-icon-edit" type="info" class="button_edit" :disabled="isDisabledUpdate"
							v-if="button.编辑" @click="btnEdit">编辑
						</el-button>
						<el-button icon="el-icon-check" type="info" class="button_check" v-if="button.新建 || button.编辑"
							:disabled="isDisabledSave" @click="btnSave">保存</el-button>
					</div>
				</div>
				<div style="padding-top: 20px;">
					<el-form ref="modelForm" :model="model" :rules="rules">
						<!-- <div class="team2 flex al-ct">基础信息</div> -->
						<el-form-item label="角色名称" prop="SysRolePostName">
							<el-input v-model="model.SysRolePostName" placeholder="角色名称" :disabled="isDisabled" />
						</el-form-item>
						<el-form-item label="备注" prop="Remark">
							<el-input v-model="model.Remark" placeholder="备注" :disabled="isDisabled" />
						</el-form-item>
						<div class="team2 flex al-ct">角色权限</div>
						<div class="team-tree" style="overflow: auto;height: 500px;">
							<el-tree class="filter-tree" :data="allMenu" :props="defaultProps" ref="tree" node-key="id"
								show-checkbox :filter-node-method="filterNode" @node-click="handleNodeClick">
							</el-tree>
						</div>
					</el-form>
				</div>
			</div>
		</el-col>
	</div>
</template>

<script>
	import common from "@/common/common.js"

	export default {
		name: "SysRolePostList",
		mixins: [common.baseVM],
		data() {
			return {
				list: [],
				total: 0,
				allMenu: [],
				search: {
					index: 1,
					size: 10
				},
				loading: false,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				button: {
					新建: true,
					编辑: true
				},

				isDisabled: true,
				isDisabledUpdate: true,
				isDisabledSave: true,
				model: {
					SysRolePostName: "",
					Remark: ""
				},
				rules: {
					SysRolePostName: [{
						required: true,
						message: '请输入角色名称'
					}]
				},
			}
		},
		methods: {
			init() {
				this.getAllMenu();
				this.getList();
			},

			getAllMenu() {
				this.post("api/System/AllMenu").then(data => {
					this.allMenu = data.Result;
				});
			},
			getSearchData() {
				var r = this.toKeyValue(this.search);
				return r;
			},
			getList() {
				this.loading = true;
				this.post("api/System/SysRolePostList", this.getSearchData()).then(data => {
					this.list = data.Result;
					this.total = data.Total;
					this.loading = false;
				}).catch(error => {
					this.loading = false;
				});
			},
			btnSave: function() {
				this.formValidate('modelForm',
					() => {
						var postData = JSON.parse(JSON.stringify(this.model));
						postData.SysPowerIDs = this.$refs.tree.getCheckedKeys();
						this.post("api/System/SysRolePostAdd", postData).then(data => {
							this.isDisabledUpdate = true;
							this.isDisabledSave = true;
							this.isDisabled = true;
							this.showToast(data.Message, "success");
							this.resetVal('model');
							this.getList();
						});
					});
			},
			btnAdd: function() {
				this.isDisabled = false;
				this.isDisabledUpdate = true;
				this.isDisabledSave = false;
				this.resetVal('model');
			},

			btnEdit: function() {
				this.isDisabled = false;
				this.isDisabledUpdate = true;
				this.isDisabledSave = false;
			},
			handleCurrentChange(row) {
				if (row == null || row.SysPowerIDs == null) return;
				this.isDisabled = true;
				this.isDisabledUpdate = false;
				this.isDisabledSave = true;
				this.model = JSON.parse(JSON.stringify(row));
				this.$refs.tree.setCheckedKeys(row.SysPowerIDs);
			},
			sizeChange(val) {
				this.search.size = val;
				this.getList();
			},
			indexChange(val) {
				this.search.index = val;
				this.getList();
			},
			// 搜索 (节点过滤)
			filterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			// tree 点击
			handleNodeClick(data) {}
		}
	}
</script>
